<template>
  <div class="middle">
    <div class="middlebg"></div>
      <el-tabs type="card"  v-loading.lock="loading">
        <div>
          <div>
            <span slot="label" class="title1" @click="constitution">数据统计</span>
            <span slot="label" class="title1 planTitle" @click="student">学生数据</span>
            <span slot="label" class="title1" @click="importData">数据导入</span>
          </div>
          <div class="surface">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="section" label="学年" width="180" align="center"></el-table-column>
              <el-table-column prop="gradeName" label="年级" width="180" align="center"></el-table-column>
              <el-table-column prop="sum" label="人数" width="180" align="center"></el-table-column>
              <el-table-column prop="qualified" label="合格率" width="180" align="center"></el-table-column>
              <el-table-column prop="good" label="优秀率" width="180" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="studentData(scope.row.gradeName,scope.row.section,scope.row.school_year_id,scope.row.grade_id)" type="primary" plain size="mini">学生数据</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--分页-->
          <el-pagination class="fenye"
                         @size-change="SizeChange"
                         @current-change="currentChange"
                         :current-page="page"
                         :page-sizes="pagesizes"
                         :page-size="rows"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        cur:0 ,//默认选中第一个tab
        rows:6,//每页几条
        page:1,//当前显示页数
        pagesizes:[6,12,18,24],//更改每页显示条数
        total:20,//一共多少条,
        tableData: [{
          year: '2018-2019',
          grade: '一年级',
          people: '100',
          pass:'50%',
          pass2:'50%'
        }],
        loading:true

      };
    },
    methods: {
      //数据统计
      constitution(){
        this.$router.push({name:'constitution'})
      },
      //学生数据
      student(){
        this.$router.push({name:'stu_data'})
      },
      //导入数据
      importData(){
        this.$router.push({name:'data_import'})
      },
      studentData(gradeName,section,schoolYearId,gradeId){
        this.$router.push(
          {
            name:'one_grade_data',
            path:'/one_grade_data',
            query:{
              gradeName:gradeName,
              section:section,
              schoolYearId:schoolYearId,
              gradeId:gradeId
            }
          }
        )
      },
      getStudentData(){
        this.$http.post('/api/constitution/classConst',{
          page:this.page,
          rows:this.rows,
        }).then(res=>{
          this.loading = false
          this.tableData = res.data.data
          this.tableData.map(item=>{
            item.qualified = item.qualified+'%'
            item.good = item.good+'%'
          })
        })
      },
      //每页显示条数
      SizeChange(val){
        this.rows = val
        this.getStudentData()()
      },
      //切换第几页
      currentChange(val){
        this.page = val
        this.getStudentData()()
      }


    },
    created(){
      this.getStudentData()
    }
  };
</script>
<style lang="less" scoped>
  .middle {
    height: 98%;
    width: 96%;
    background:repeat center top;
    background-size: contain;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    .middlebg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: url(../../assets/image/bg-img.png) no-repeat center;
      background-size: 100%;

    }
    /deep/ .el-tabs.el-tabs--card.el-tabs--top {
      background: #fff;
    }
    /deep/.el-card__body {
      padding: 0;
      padding-bottom: 20px;
    }
    /deep/.el-tabs__content {
      padding: 0 20px;
    }
    .title1 {
      display: inline-block;
      padding: 0 10px;
      margin-bottom: 20px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        background: #00b02d;
        color: #fff;
      }
    }
    .planTitle {
      color: #fff;
      background: #00B02D;
    }
    .fenye {
      margin:20px 0;
      text-align: center;
    }

  }
</style>
